import React from 'react';
import {Tabs} from 'antd';
import {injectIntl} from 'react-intl';
import UserChargeReported from './userChargeReported';
import CarChargeReport from './carChargeReport';
import DepChargeReport from './depChargeReport';
import Grid from '../../components/table/grid';
import ChargeProcess from '../order/chargeProcess'
import axios from 'axios'
import {sessionManager} from "../../utils/sessionStorage";

const TabPane = Tabs.TabPane;

class departmentPicker extends React.Component {
    constructor(props) {
        super(props);
        this.newTabIndex = 0;
        const common = this.props.intl.messages.common;
        const panes = [
            { title: '部门充电报表', content: <DepChargeReport openNewPane={this.add}/>, key: '1' ,closable: false},
            { title: '用户充电明细', content: <UserChargeReported/>, key: '2' ,closable: false},
            { title: '车辆充电明细', content: <CarChargeReport/>, key: '3', closable: false },
        ];
        this.state = {
            activeKey: panes[0].key,
            panes,
        };
        this.modalColumns = [
            {
                title: common.orderNO,
                dataIndex: 'id',
                key: 'id',
                width: 320,
                fixed: 'left'
            },
            {
                title: common.userAccount,
                dataIndex: 'account',
                key: 'account',
                width: 150,
            },
            {
                title: common.username,
                dataIndex: 'name',
                key: 'name',
                width: 100,
            },
            {
                title: common.launchTime,
                dataIndex: 'startTime',
                key: 'startTime',
                width: 200,
            },
            {
                title: common.endTime,
                dataIndex: 'endTime',
                key: 'endTime',
                width: 200,
            },
            {
                title: common.duration,
                dataIndex: 'chargeTime',
                key: 'chargeTime',
                width: 150,
            },
            {
                title: common.electricQuantity,
                dataIndex: 'electric',
                key: 'electric',
                width: 150,
            },
            {
                title: common.energyCharge,
                dataIndex: 'feeElectric',
                key: 'feeElectric',
                width: 150,
            },
            {
                title: common.serviceCharge,
                dataIndex: 'feeService',
                key: 'feeService',
                width: 150,
            },
            {
                title: common.chargingState,
                dataIndex: 'status',
                key: 'status',
                width: 150,
            },
            {
                title: common.licenseNumber,
                dataIndex: 'plateNo',
                key: 'plateNo',
                width: 150,
            },
            {
                title: common.vinOfCar,
                dataIndex: 'vin',
                key: 'vin',
                width: 180,
            },
            {
                title: common.EquipmentNo,
                dataIndex: 'stubId',
                key: 'stubId',
                width: 150,
            },
            {
                title: common.powerStationName,
                dataIndex: 'stubGroupName',
                key: 'stubGroupName',
                width: 150,
                className:'SC-col-dots'
            },
            {
                title: common.startType,
                dataIndex: 'startType',
                key: 'startType',
                width: 150,
            },
            {
                title: common.electricCardNO,
                dataIndex: 'cardNo',
                key: 'cardNo',
                width: 150,
            },
            {
                title: common.endInfo,
                dataIndex: 'endInfo',
                key: 'endInfo',
                width: 400,
                className:'SC-col-dots'
            },
            {
                title: common.operation,
                key: 'operation',
                fixed: 'right',
                width: 100,
                render: (text, record) => (
                    <span>
                        <a  onClick={()=>this.showDiffMoudle(text,record,'chargeProcess')} className={"auth"}>{common.chargingProcess}</a>
                    </span>
                ),
            }
        ];
    }

    componentWillMount() {
    }

    showDiffMoudle(text){
        sessionManager.set('orderInfo',text);
        const panes = this.state.panes;
        const activeKey = `newTab${this.newTabIndex++}`;
        panes[4]={ title: '充电过程', content: <ChargeProcess/>, key: activeKey };
        this.setState({
            panes,
            activeKey,
        });
    }

    onChange = (activeKey) => {
        this.setState({ activeKey });
    }

    onEdit = (targetKey, action) => {
        this[action](targetKey);
    };

    add = (data) => {
        const panes = this.state.panes;
        const activeKey = `newTab${this.newTabIndex++}`;
        this.setState({
            modalParams:data
        },()=>{
            panes[3]={ title: '部门充电订单', content:  <Grid params={this.state.modalParams} columns={this.modalColumns}
                                                         url={'api/statistics/org/chargeOrder/qry'}/>, key: activeKey };
            this.setState({
                panes,
                activeKey,
            });
        })
    };


    remove = (targetKey) => {
        let activeKey = this.state.activeKey;
        let lastIndex;
        this.state.panes.forEach((pane, i) => {
            if (pane.key === targetKey) {
                lastIndex = i - 1;
            }
        });
        const panes = this.state.panes.filter(pane => pane.key !== targetKey);
        if (lastIndex >= 0 && activeKey === targetKey) {
            activeKey = panes[lastIndex].key;
        }
        this.setState({ panes, activeKey });
    }




    render() {
        return (
            <Tabs
                hideAdd
                onChange={this.onChange}
                activeKey={this.state.activeKey}
                type="editable-card"
                onEdit={this.onEdit}
            >
                {this.state.panes.map(pane => <TabPane tab={pane.title} key={pane.key} closable={pane.closable}>{pane.content}</TabPane>)}
            </Tabs>

        )
    }
}

export default injectIntl(departmentPicker);